<!-- <template>
	<view class="popup-content">
		<view>{{msg}}</view>
		<view>你在说{{voicetext}}</view>
		<button class="uni-btn" type="warn" @touchstart="startvoice" @touchend="endvoice">按说语话松开停止</button>
		<button class="uni-btn" type="warn" @tap="playvoice">播放录音</button>
	</view>
</template>
<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				voicetext: "",
				msg: "",
				voicepath: ""
			}
		},
		onLoad() {
			this.initaudio()

		},
		methods: {
			async initaudio() {
				//注意此处必须为 await 因为会触发异步事件，手机上会弹出权限申请对话框处理完才能走下一步录音
				recorderManager.onStart((res) => {
					console.log("开始 录音>>>>>>>>>...")
					console.log(res)
				});
				recorderManager.onStop((res) => {
					console.log("recorderstop....res.tempFilePath>>>" + res.tempFilePath)
					this.voicepath = res.tempFilePath
					this.uploadvoicefile()
					// 使用uni.uploadFile上传到服务器上，此时是mp3格式
				});

				recorderManager.onError((res) => {

					console.log('onError' + JSON.stringify(res));
				});
			}, //initaudio 方法结束
			startvoice() {
				console.log("开始录音")
				recorderManager.start({
					format: "mp3",
					sampleRate: 16000 // 必须设置是后台设置的参数，不然百度语音识别不了
				});
			},
			endvoice() {

				console.log("结束录音")
				//注意为了避免说话时间太短导致这个api出现bug要加一些延时
				setTimeout(() => {
					recorderManager.stop()
				}, 1000)

			},
			playvoice() {
				console.log("点击playvoice")
				if (this.voicepath) {
					console.log("播放声音")
					innerAudioContext.src = this.voicepath;
					innerAudioContext.play();
				}
			},
			uploadvoicefile() {
				// this.msg = "调用java端服务文件路径"+this.voicepath
				uni.uploadFile({
					url: 'http://ip:端口/uploadFile（java端接收文件接口名）',
					filePath: this.voicepath, //录音结束后返回的临时路径，
					name: 'file',
					formData: {
						dev_id: 1537 //中文带标点
					},
					success: (uploadFileRes) => {
						let word = uploadFileRes.data
						console.log("上传音频成功" + word);
					},
					fail: (res) => {

						console.log("上传音频失败" + JSON.stringify(res));
					}
				});
			}
		}
	}
</script> -->

<!-- From Uiverse.io by SmookyDev -->
<template>
	<view class="container">
		<view class="center_div" @click="toggleAnimation">
			<!-- 调试提示：显示当前状态 -->
			<text class="status-text">{{ isPlaying ? '点击暂停' : '点击播放' }}</text>

			<view class="wave" :class="{ 'wave-playing': isPlaying }"
				:style="{ animationDelay: (index - 1) * 0.1 + 's' }" v-for="index in 10" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false // 仅用一个状态控制播放/暂停
			};
		},
		methods: {
			toggleAnimation() {
				this.isPlaying = !this.isPlaying;
				// 打印状态，确认点击事件是否触发
				console.log('动画状态:', this.isPlaying ? '播放中' : '已暂停');
			}
		}
	};
</script>

<style>
	.container {
		width: 100%;
		min-height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.center_div {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200px;
		/* 固定高度，确保点击区域稳定 */
		cursor: pointer;
		background: #f5f5f5;
		border-radius: 8px;
		position: relative;
	}

	/* 波浪基础样式（用px确保可见性，避免rpx适配问题） */
	.wave {
		width: 10px;
		/* 更宽的波浪，确保肉眼可见 */
		height: 100px;
		background: #55aaff;
		/* 更实的颜色，避免透明度过高导致看不见 */
		margin: 0 4px;
		border-radius: 4px;
		transform-origin: bottom;
		/* 从底部开始缩放，更像波浪 */
		transform: scaleY(0.1);
		/* 初始微小可见 */
	}

	/* 播放状态时添加动画 */
	.wave-playing {
		animation: wave 1.5s linear infinite;
	}

	/* 状态提示文字 */
	.status-text {
		position: absolute;
		color: #333;
		font-size: 16px;
		z-index: 10;
		/* 确保文字在波浪上方 */
	}

	/* 更明显的动画关键帧（Y轴缩放，变化更直观） */
	@keyframes wave {
		0% {
			transform: scaleY(0.1);
		}

		/* 初始高度 */
		50% {
			transform: scaleY(1);
		}

		/* 最高高度 */
		100% {
			transform: scaleY(0.1);
		}

		/* 回到初始 */
	}
</style>